<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../static/static/css/font.css">
    <link rel="stylesheet" href="../static/static/css/weadmin.css">
    <script src="../static/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<br>
<fieldset class="layui-elem-field">
    <legend>商品新增</legend>
    <div class="layui-field-box">
        以下表单为商品的基础信息
    </div>
</fieldset>
<br><br>
<form class="layui-form" onsubmit="return false;">
    <div class="layui-form-item">
        <label class="layui-form-label">商品标题</label>
        <div class="layui-input-block">
            <input type="text" id="name" name="name" autocomplete="off" placeholder="请输入标题"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品类别</label>
            <div class="layui-input-block">
                <select id="type" name="type">

                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select id="status" name="status">
                    <option value="上架">上架</option>
                    <option value="下架">下架</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-block">
                <input type="text" id="code" name="code" autocomplete="off" placeholder="请输入编号"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">一口价</label>
            <div class="layui-input-block">
                <input type="text" id="price" name="price" autocomplete="off" placeholder="请输入一口价"
                       class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-btn-group demoTable" style="margin-bottom: 10px;">
        <button class="layui-btn" onclick="addMainTB()">新增主图</button>
    </div>
    <table lay-filter="mainTB">
        <thead>
        <tr>
            <th lay-data="{field:'url'}">URL</th>
        </tr>
        </thead>
        <tbody id="mainTBURL">

        </tbody>
    </table>

    <div class="layui-btn-group demoTable" style="margin-bottom: 10px;">
        <button class="layui-btn" onclick="addDetailTB()">新增详情页</button>
    </div>
    <table lay-filter="detailTB">
        <thead>
        <tr>
            <th lay-data="{field:'url'}">URL</th>
        </tr>
        </thead>
        <tbody id="detailTBURL">

        </tbody>
    </table>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>以下部分为款式</legend>
    </fieldset>
    <div class="layui-btn-group demoTable" style="margin-bottom: 10px;">
        <button class="layui-btn" onclick="addStyleModel()">新增款式</button>
    </div>
    <table lay-filter="styleModel">
        <thead>
        <tr>
            <th lay-data="{field:'url'}">名称</th>
            <th lay-data="{field:'url'}">单价</th>
            <th lay-data="{field:'url'}">编号</th>
            <th lay-data="{field:'url'}">剩余库存</th>
            <th lay-data="{field:'url'}">黄色预警值</th>
            <th lay-data="{field:'url'}">红色预警值</th>
            <th lay-data="{field:'url'}">图片地址</th>
        </tr>
        </thead>
        <tbody id="styleModel">

        </tbody>
    </table>
    <br><br><br>
    <div class="layui-form-item" style="text-align: center">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-warm" onclick="addGoods()">提交</button>
        </div>
    </div>
    <br>
</form>
<script>
    layui.use(['form', 'table', 'upload'], function () {
        layui.table.init('mainTB', {
        });
        layui.table.init('detailTB', {
        });
        layui.table.init('styleModel', {
        });
        layui.table.on('edit(styleModel)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
        });
        var $ = layui.$;
        var form = layui.form;
        $.ajax({
            type: 'GET',
            url: '/goodsType/getTypeSelect',
            dataType: 'json',
            success: function (data) {
                var typeList = data.data;
                for (var i = 0; i < typeList.length; i++) {
                    var option1 = $("<option>").val(typeList[i].id).text(typeList[i].name);
                    $("#type").append(option1);
                }
                form.render('select');
                $("#type").get(0).selectedIndex = 0;
            }
        });
    });
    var addMainTB = function () {
        var $ = layui.$;
        var url = '';
        var html = '<textarea id="content" name="content" placeholder="" ' +
                'style="margin-top: 0px; margin-bottom: 0px; height: 170px;"' +
                ' class="layui-textarea"></textarea>'
        var alert = layer.open({
            title: '请填写图片链接'
            , content: html
            , area: ['500px', '300px']
            , yes: function (index, layero) {
                layer.close(alert);
                $("#mainTBURL").append('<tr>'+
                        '<td>'+document.getElementById("content").value+'</td>'+
                        '</tr>');
                layui.table.init('mainTB', {
                    limit: 10
                    ,id: 'mainTBTable'
                });
            }
        });
    }
    var addDetailTB = function () {
        var $ = layui.$;
        var url = '';
        var html = '<textarea id="content" name="content" placeholder="" ' +
                'style="margin-top: 0px; margin-bottom: 0px; height: 170px;"' +
                ' class="layui-textarea"></textarea>'
        var alert = layer.open({
            title: '请填写图片链接'
            , content: html
            , area: ['500px', '300px']
            , yes: function (index, layero) {
                layer.close(alert);
                $("#detailTBURL").append('<tr>'+
                        '<td>'+document.getElementById("content").value+'</td>'+
                        '</tr>');
                layui.table.init('detailTB', {
                    limit: 10
                    ,id: 'detailTBTable'
                });
            }
        });
    }
    var addStyleModel = function () {
        var $ = layui.$;
        var html = '<div class="layui-form-item">'+
                '<div class="layui-inline">'+
                '<label class="layui-form-label">名称</label>'+
                '<div class="layui-input-block">'+
                '<input type="text" id="name" name="name" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">'+
                '</div>'+
                '</div>'+
                '<div class="layui-inline">'+
                '<label class="layui-form-label">单价</label>'+
                '<div class="layui-input-block">'+
                '<input type="text" id="price" name="price" required  lay-verify="required" placeholder="请输入单价" autocomplete="off" class="layui-input">'+
                '</div>'+
                '</div>'+
                '<div class="layui-inline">'+
                '<label class="layui-form-label">编号</label>'+
                '<div class="layui-input-block">'+
                '<input type="text" id="code" name="code" required  lay-verify="required" placeholder="请输入编号" autocomplete="off" class="layui-input">'+
                '</div>'+
                '</div>'+
                '</div>'+
                '<div class="layui-form-item">'+
                '<div class="layui-inline">'+
                '<label class="layui-form-label">剩余库存</label>'+
                '<div class="layui-input-block">'+
                '<input type="text" id="balance" name="balance" required  lay-verify="required" placeholder="请输入剩余库存" autocomplete="off" class="layui-input">'+
                '</div>'+
                '</div>'+
                '<div class="layui-inline">'+
                '<label class="layui-form-label">黄色预警值</label>'+
                '<div class="layui-input-block">'+
                '<input type="text" id="balanceWarn" name="balanceWarn" required  lay-verify="required" placeholder="请输入黄色预警值" autocomplete="off" class="layui-input">'+
                '</div>'+
                '</div>'+
                '<div class="layui-inline">'+
                '<label class="layui-form-label">红色预警值</label>'+
                '<div class="layui-input-block">'+
                '<input type="text" id="balanceError" name="balanceError" required  lay-verify="required" placeholder="请输入红色预警值" autocomplete="off" class="layui-input">'+
                '</div>'+
                '</div>'+
                '</div>'+
                '<div class="layui-form-item">'+
                '<label class="layui-form-label">图片地址</label>'+
                '<div class="layui-input-block">'+
                '<input type="text" id="imgPath" name="imgPath" required  lay-verify="required" placeholder="请输入图片地址" autocomplete="off" class="layui-input">'+
                '</div>'+
                '</div>'
        var alert = layer.open({
            title: '请填写款式信息'
            , content: html
            , area: ['1000px', '300px']
            , yes: function (index, layero) {
                layer.close(alert);
                $("#styleModel").append('<tr>'+
                        '<td>'+document.getElementById("name").value+'</td>'+
                        '<td>'+document.getElementById("price").value+'</td>'+
                        '<td>'+document.getElementById("code").value+'</td>'+
                        '<td>'+document.getElementById("balance").value+'</td>'+
                        '<td>'+document.getElementById("balanceWarn").value+'</td>'+
                        '<td>'+document.getElementById("balanceError").value+'</td>'+
                        '<td>'+document.getElementById("imgPath").value+'</td>'+
                        '</tr>');
                layui.table.init('styleModel', {
                    limit: 30
                    ,id: 'styleModelTable'
                });
            }
        });
    }
</script>
</body>
</html>